<script lang="ts" setup>
  import { ref, watch } from "vue"
  import gmDialog from '@/components/Dialog/index.vue'
  import { cloneDeep } from "lodash-es"
  import { saveOrUpdateSiteWorkCustomDepartment, getSiteWorkCustomDepartmentById } from '@/api/site'
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'
  import useFile from '@/hooks/useFile'
  import SiteSelect from '@/components/SiteSelect/index.vue'

  interface Props {
    data?: any
  }

  // watch(() => props.siteWorkId, (newVal) => {
  //   if (newVal) getDataDetails()
  // }, { immediate: true })

  const props = withDefaults(defineProps<Props>(), {
    data: () => ({}),
  })

  const form = ref<any>(cloneDeep(props.data) || {})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDialog>>()
  const emit = defineEmits(['cancel', 'success'])
  let fileUploadBtn =ref<any>()

  const rules: FormRules = {
    siteId: [
      { required: true, message: '请输入场地名称', trigger: 'change' },
    ],
    workDate: [
      { required: true, message: '请输入日期', trigger: 'change' },
    ],

    pics: [
      { required: true, message: '请上传图片', trigger: 'change' },
    ],
    type: [
      { required: true, message: '请选择类型', trigger: 'change' },
    ],
    remark: [
      { required: true, message: '请输入备注', trigger: 'change' },
    ],

  }

  const { handleSubmit } = useForm({ formType: 'dialog', emit: emit })

  const cancel = () => {
    emit('cancel')
  }
  const { beforeUpload, uploadUrl, uploadImage } = useFile({ maxSize: 10, fileType: 'image' })
  const handleUploadSuccess = (res: any, file: any) => {
    console.log(res,'resresres')
    form.value.pics.push(res.result)
    nextTick(() => {
      // 清空上传组件的文件列表
      if (fileUploadBtn.value) {
        fileUploadBtn.value.clearFiles();
        // 重置 input 的值，确保下次选择相同文件也能触发
        const input = fileUploadBtn.value.$el.querySelector('input[type="file"]') as HTMLInputElement;
        if (input) {
          input.value = '';
        }
      }
    });
  }
  const handleUploadDel = (src: string) => {
    console.log(src, 'sev', form.value.pics)
    form.value.pics = form.value.pics.filter((i) => i !== src)
  }

  const success = () => {
    form.value.pic = form.value.pics.join(',')
    let newForm={
      workDate:form.value.workDate,
      type:form.value.type,
      siteName:form.value.siteName,
      remark:form.value.remark,
      pic:form.value.pic,
      siteId:form.value.siteId,
      siteWorkId:form.value.siteWorkId
    }
    handleSubmit(saveOrUpdateSiteWorkCustomDepartment, formRef.value, newForm, dialogRef.value)
  }

  const getDataDetails = () => {
    getSiteWorkCustomDepartmentById({ id: props.siteWorkId }).then((res: any) => {
      form.value = res
      form.value.pics = res.pic ? res.pic.split(',') : []
      console.log(form.value, '---------form---------')
    })
  }




const handleChange = (e: any)=>{
  console.log(e,'eeeee')
  form.value.siteName=e.name
}
</script>

<template>
  <gm-dialog
    ref="dialogRef"
    :title="!props.siteWorkId ? '新增每日工作' : '编辑每日工作'"
    @cancel="cancel"
    @comfirm="success">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item prop="siteId" label="场地名称">
        <SiteSelect v-model="form.siteId" :multiple="false" width="100%" @change="handleChange"></SiteSelect>
      </el-form-item>
      <el-form-item prop="type" label="类型">
        <el-select clearable v-model="form.type" placeholder="请选择">
          <el-option label="清洁" :value="0"></el-option>
          <el-option label="消杀" :value="1"></el-option>
          <el-option label="疏通" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="workDate" label="日期">
        <el-date-picker
          v-model="form.workDate"
          type="date"
          placeholder="请选择"
          style="width:100%;"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="图片" prop="pics">
        <el-upload
        ref="fileUploadBtn"
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload">
          <el-icon class="upload-img-action"><Plus /></el-icon>
        </el-upload>
        <div class="form-value-flex" v-if="form.pics&&form.pics.length>0">
          <uploadImage v-for="item in form.pics" :src="item" @del="handleUploadDel(item)" class="upload-img-image" />
        </div>
      </el-form-item>
      
      <el-form-item prop="remark" label="备注">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入" />
      </el-form-item>
    </el-form>
  </gm-dialog>
</template>

<style lang="scss" scoped>
</style>
